<template>
	<view>
		<view class="head">
			<image :src="headImg" mode="" class="headImg"></image>
			<!-- <swiper class="headImg" :circular="circular" :indicator-dots="true"
				indicator-color="rgba(255, 255, 255,0.6)" indicator-active-color="rgba(255, 255, 255,1)">
				<swiper-item v-for="(img,index) in photoWalls" :key="index">
					<image :src="headImg" mode="" class="headImg"></image>
				</swiper-item>
			</swiper> -->

			<view class="btn" @click="openPop" style="display: flex;align-items: center;">
				<image style="width: 32upx;height: 32upx;margin-left: 30upx;"
					:src="$BASE_URL+'/st/mini/static/img/personal/voice.png'" mode=""></image>
				<text
					style="flex: 1;margin-right: 6upx;">{{durations==0?'点击录制':durations<10?'0'+durations+'"':durations}}</text>
			</view>
		</view>
		<view class="message">
			<view class="top">
				<view class="name">{{listData.nickName}}</view>
				<!-- <image
					:src="listData.isVeritified==1?'../../../static/img/personal/zhenyans.png':'../../../static/img/personal/zhenyan.png'"
					mode="widthFix" class="zhenyan"></image> -->

			</view>
			<view style="display: flex;align-items: center;margin-bottom: 20upx;">
				<p class="sex"
					:style="listData.sex==1?'background: url('+man+') no-repeat;background-size: contain;':listData.sex==2?'background: url('+woman+') no-repeat;background-size: contain;':'background: url('+no+') no-repeat;background-size: contain;'">
					<text style="margin-left: 21upx;">{{listData.age}}</text>
				</p>
				<image v-if="listData.costLevel==0" :src="$BASE_URL+'/st/mini/static/img/vip1/vip0@2x.png'" class="costLevel"
					alt="" />
				</image>
				<image v-else-if="listData.costLevel<20"
					:src="$BASE_URL+'/st/mini/static/img/vip1/vip_'+listData.costLevel+'@2x.png'" class="costLevel" />
				</image>
				<image v-else-if="listData.costLevel==20"
					:src="$BASE_URL+'/st/mini/static/img/vip1/vip_'+listData.costLevel+'.gif'" class="costLevel" alt="" />
				</image>
				<p class="nianfei" v-if="listData.grade!=undefined&&listData.isUserMember!=3"
					:style="'background: url('+nianfei+') no-repeat;background-size: 100% 100%;'">
					{{listData.grade}}
				</p>
				<image v-if="listData.isVeritified==1" :src="$BASE_URL+'/st/mini/static/img/personal/renzhengicon.png'"
					class="renzheng" alt="" />
				</image>
			</view>
			<view class="list">
				<ul>
					<li>关注 {{listData.attentionCount}}</li>
					<li>粉丝 {{listData.fansCount}}</li>
					<li>好友 {{listData.friendCount}}</li>
				</ul>
			</view>
			<view class="body-view">
				<view id="scrollView" :style="isTop == 1 ? 'position:fixed;background:#FFFFFF;z-index:9;top:0' :''">
					<scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft" enable-flex="true">
						<block v-for="(menuTab,index) in menuTabs" :key="index">
							<view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
								<view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
									<view class="menu-one-txt">{{menuTab.name}}</view>
									<view class="menu-one-bottom">
										<view class="menu-one-bottom-color"></view>
									</view>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<view v-if="isTop==1" style="height: 41upx;"></view>
				<view class="ziliao" v-show="currentTab==0">
					<view>
						<view class="title">账号等级与徽记</view>
						<scroll-view scroll-x="true" class="bottomImg">
							<view class="imgList" v-if="listData.jueweiIsExpire!=1">
								<view style="width: 100%;">
									<image :src="$BASE_URL+'/st/mini/static/img/nobility/'+listData.jueweiId+'.png'" class="img">
									</image>
								</view>
								<view class="txt">
									{{listData.jueweiId==1?'男爵':listData.jueweiId==2?'子爵':listData.jueweiId==3?'伯爵':listData.jueweiId==4?'侯爵':listData.jueweiId==5?'公爵':listData.jueweiId==6?'国王':''}}
								</view>
							</view>
							<view class="imgList">
								<view style="width: 100%;">
									<image :src="$BASE_URL+'/st/mini/static/img/vip/VIP'+listData.costLevel+'@2x.png'"
										class="img">
									</image>
								</view>
								<view class="txt">lv.{{listData.costLevel}}</view>
							</view>
							<view class="imgList" v-if="listData.grade!=undefined&&listData.isUserMember!=3">
								<view style="width: 100%;">
									<!-- isUserMember; //是否会员（1-普通会员 2-年会员 3-非会员） -->
									<image
										:src="listData.isUserMember==1?$BASE_URL+'/st/mini/static/img/member/normal.png':listData.isUserMember==2?$BASE_URL+'/st/mini/static/img/member/years.png':''"
										class="img">
									</image>
								</view>
								<view class="txt">lv.{{listData.grade}}</view>
							</view>
							<view class="imgList">
								<view style="width: 100%;">
									<image
										:src="$BASE_URL+'/st/mini/static/img/zhibo/ic_chat_level_badge_'+listData.anchorLevel+'.png'"
										class="img">
									</image>
								</view>
								<view class="txt">lv.{{listData.anchorLevel}}</view>
							</view>
						</scroll-view>
						<scroll-view scroll-x="true" class="bottomImg">
							<view class="imgList" v-for="(img,index) in emblemList" :key="index">
								<view style="width: 100%;">
									<image :src="img.image" class="img"></image>
								</view>
								<view class="txt">{{img.name}}</view>
							</view>
						</scroll-view>
					</view>
					<view>
						<view class="title">账号信息</view>
						<ul>
							<!-- 0空号1普通2靓号3超靓4帝王 -->
							<li style="display: flex;align-items: center;">
								哩咔ID：
								<text
									:style="listData.idNoLevel==4?'color:#fdd325;':listData.idNoLevel==3?'color:#ba57fb;':listData.idNoLevel==2?'color:#f46e61;':''">{{listData.identityId}}</text>
								<text class="bigNum"
									:style="listData.idNoLevel==4?'background:linear-gradient(to right,#FED615,#FFAC1F);':listData.idNoLevel==3?'background:linear-gradient(to right,#CB5CFC,#C444FC);':listData.idNoLevel==2?'background:linear-gradient(to right,#FA685A,#EB493A);':''">{{listData.idNoLevel==4?'帝王':listData.idNoLevel==3?'超靓':listData.idNoLevel==2?'靓号':''}}</text>
							</li>
							<li>注册日期：{{date}}</li>
						</ul>
					</view>
					<view>
						<view class="title">签名</view>
						<view class="qianming">{{listData.descr==''?'暂未添加个性签名~':listData.descr}}</view>
					</view>
					<view>
						<view class="title">个性标签</view>
						<view style="width: 100%;overflow: hidden;">
							<view class="biaoqian" style="float: left;" v-for="(list,index) in interestData"
								:key="index" v-if="listData.interest!=''">{{list}}</view>
							<view v-else style="font-size: 28upx;">暂未添加个性标签~</view>
						</view>
					</view>
				</view>
				<view class="dongtai" v-show="currentTab==1">
					<view v-for="(list,index) in dynamicNewInfoList" :key="index" style="display: flex;">
						<image class="headimg" :src="$global.getImageUrl(list.headImg, 'https://ourydcimage.shenghua6.cn')"
							mode=""></image>
						<view class="dtRight">
							<view class="name">{{list.nickName}}</view>
							<view style="display: flex;align-items: center;margin-bottom: 20upx;">
								<p class="sex"
									:style="list.sex==1?'background: url('+man+') no-repeat;background-size: contain;':list.sex==2?'background: url('+woman+') no-repeat;background-size: contain;':'background: url('+no+') no-repeat;background-size: contain;'">
									<text style="margin-left: 21upx;">{{list.age}}</text>
								</p>
								<image v-if="list.costLevel==0" :src="$BASE_URL+'/st/mini/static/img/vip1/vip0@2x.png'"
									class="costLevel" alt="" />
								</image>
								<image v-else-if="list.costLevel<20"
									:src="$BASE_URL+'/st/mini/static/img/vip1/vip_'+list.costLevel+'@2x.png'" class="costLevel" />
								</image>
								<image v-else-if="list.costLevel==20"
									:src="$BASE_URL+'/st/mini/static/img/vip1/vip_'+list.costLevel+'.gif'" class="costLevel"
									alt="" />
								</image>
							</view>
							<view class="title">{{list.content}}</view>
							<view class="iclist">
								<view v-for="(item,idx) in list.topIcInfo" :key="idx" class="listicon">#{{item.name}}#
								</view>
							</view>
							<view class="tip">{{$global.formatMsgTime(list.insdt,nowDt)}} | {{list.distance}}</view>
							<view class="bottomR">
								<view style="width: 100upx;" @click="openPop()">
									<image style="width:8upx;" :src="$BASE_URL+'/st/mini/static/img/personal/more.png'"
										mode="widthFix"></image>
								</view>
								<view style="display: flex;">
									<ul style="display: flex;align-items: center;" @click="openPop()">
										<li style="height: 39upx;">
											<image style="width:44upx;"
												:src="list.isHeart==1?$BASE_URL+'/st/mini/static/img/personal/dianzans.png':$BASE_URL+'/st/mini/static/img/personal/dianzan.png'"
												mode="widthFix"></image>
										</li>
										<li style="margin-left: 13upx;">点赞</li>
									</ul>
									<ul style="display: flex;align-items: center;margin-left: 45upx;"
										@click="openPop()">
										<li style="height: 40upx;">
											<image style="width: 40upx;" :src="$BASE_URL+'/st/mini/static/img/personal/xiaoxi.png'"
												mode="widthFix"></image>
										</li>
										<li style="margin-left: 13upx;">评论</li>
									</ul>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="status1" :content-text="contentText" />
				</view>
			</view>

		</view>
		<view class="bottomBtn">
			<ul>
				<li class="li1" @click="goPath('../editor/editor')">编辑资料</li>
				<li class="li2" style="position: relative;">
					分享主页
					<button class="fx" data-name="shareBtn" hover-class="btn-hover" open-type="share"></button>
				</li>
			</ul>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<view class="top">
					<ul>
						<li class="li1" @click="closePop()">取消</li>
						<li class="li2">我的录音</li>
						<li class="li3">保存</li>
					</ul>
				</view>
				<view class="content" :style="'background: url('+bgUrl+') no-repeat;background-size: contain;'">
					<ul>
						<li class="li1">录音示例</li>
						<li class="li2" @click="changeVoiceName()">
							<image class="shuaxin" :src="$BASE_URL+'/st/mini/static/img/personal/shuaxin.png'" mode=""></image>
						</li>
					</ul>
					<view class="txt">
						<text>{{guideName}}</text>
					</view>
				</view>
				<view class="btnAll">
					<view class="btn" style="background: #af92d0;" @click="clearAudio" v-if="startShow">重置</view>
					<view class="btn" v-else>重置</view>
					<view class="circleprogress">
						<view class="progresstext">
							<image :src="audioUrl" mode="" class="img" v-if="audioShow" @click="changeBtn(1)"></image>
							<image :src="stopUrl" mode="" class="img" v-if="stopShow" @click="changeBtn(2)"></image>
							<image :src="startUrl" mode="" class="img" v-if="startShow" @click="changeBtn(3)"></image>
							<image :src="pauseUrl" mode="" class="img" v-if="pauseShow" @click="changeBtn(4)"></image>
						</view>
						<view class="wrapper">
							<view class="leftprogress" :style="{ transform: leftprogress}"></view>
						</view>
						<view class="wrapper">
							<view class="rightprogress" :style="{ transform: rightprogress}"></view>
						</view>
					</view>
					<view class="btn" style="background: #1BE2A5;" @click="clearAudio" v-if="startShow">完成</view>
					<view class="btn" v-else>完成</view>
				</view>
				<view style="text-align: center;font-size: 30upx;color: #ED78E1;margin-top: 20upx;">{{time}}</view>
				<view style="text-align: center;font-size: 30upx;color: #333333;margin-top: 20upx;">{{title}}</view>
			</view>
		</uni-popup>
		<u-action-sheet :list="list" v-model="show" @click="changeAudio"></u-action-sheet>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager()
	const innerAudioContext = uni.createInnerAudioContext()
	var init
	import uniPopup from '../../components/uni-popup/uni-popup.vue';
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniPopup,
			uniLoadMore
		},
		data() {
			return {
				$BASE_URL:this.$BASE_URL,
				nowDt: '',
				status1: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				page: 0,
				isLoadMore: false, //是否加载中
				dynamicNewInfoList: [],
				show: false,
				list: [{
					text: '播放语音',
				}, {
					text: '替换语音'
				}, {
					text: '删除语音'
				}],
				num: 0,
				title: '最多录制15秒，点击开始录制',
				audioUrl: this.$BASE_URL+'/st/mini/static/img/personal/audio.png',
				stopUrl: this.$BASE_URL+'/st/mini/static/img/personal/stop.png',
				startUrl:this.$BASE_URL+'/st/mini/static/img/personal/start.png',
				pauseUrl: this.$BASE_URL+'/st/mini/static/img/personal/pause.png',
				audioShow: true,
				stopShow: false,
				startShow: false,
				pauseShow: false,
				headImg: '',
				menuTabs: [{
					name: '资料'
				}, {
					name: '动态'
				}],
				vipList: [],
				indicatorDots: true,
				circular: true,
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				listData: [],
				date: '',
				interestData: [],
				emblemList: [],
				man: '',
				woman: '',
				no: '',
				bgUrl: '',
				nianfei: '',
				leftprogress: 'rotate(-45deg)',
				rightprogress: 'rotate(45deg)',
				progresstext: '0',
				time: 0, //录音时长
				duration: 600000, //录音最大值ms 600000/10分钟
				tempFilePath: "", //音频路径
				status: 0, //录音状态 0:未开始录音 1:正在录音 2:暂停录音 3:已完成录音
				playStatus: 0, //录音播放状态 0:未播放 1:正在播放
				guideName: '',
				durations: '',
				guideList: [],
				photoWalls: [],
				height: 0,
				isTop: 0,
				share: {
					title: '语音交友  就上哩咔',
					path: '/pages/subpage/personal/personal',
					imageUrl: '',
					desc: '',
					content: ''
				}
			}
		},
		onLoad() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					// model设备型号
					// iOS
					// 标题栏高度
					if (res.model.indexOf('iPhone') !== -1) {
						that.titleBarHeight = 44
					} else {
						that.titleBarHeight = 48
					}
					// 状态栏高度
					that.statusBarHeight = res.statusBarHeight
					that.height = that.titleBarHeight + that.statusBarHeight
				}
			})
			console.log(that.height)
		},
		onShareAppMessage() {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				content: this.share.content,
				desc: this.share.desc,
				success: res => {
					console.info(res)
				}
			}
		},
		// 上拉加载更多,onReachBottom上拉触底函数
		onReachBottom: function() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page++
				this.dynamicNewInfo();
			}
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.myScroll) {
				this.isTop = 1
			} else {
				this.isTop = 0
			}
		},
		mounted() {
			console.log('mounted 组件挂载完毕状态===============》');
			const query = uni.createSelectorQuery().in(this);
			query.select('#scrollView').boundingClientRect(data => {
				console.log("得到布局位置信息" + JSON.stringify(data));
				console.log("节点离页面顶部的距离为" + data.top);
				this.myScroll = data.top
			}).exec();
			this.man = this.$BASE_URL+'/st/mini/static/img/sex/man.png'
			this.woman = this.$BASE_URL+'/st/mini/static/img/sex/woman.png'
			this.no = this.$BASE_URL+'/st/mini/static/img/sex/no.png'
			this.bgUrl = this.$BASE_URL+'/st/mini/static/img/personal/bg.png'
			this.nianfei = this.$BASE_URL+'/st/mini/static/img/personal/nianfeivip.png'
		},
		onShow() {
			// this.getsign()
			this.myProfileInfo()
		},
		methods: {
			goPath(path) {
				uni.navigateTo({
					url: path
				})
			},
			changeAudio(index) {
				if (index == 1) {
					this.$refs.popup.open('bottom')
				}
			},
			openPop() {
				uni.showToast({
					title: '更多精彩请下载“哩咔”APP',
					icon: 'none',
					duration: 2000
				});
				// if (this.duration == 0) {
				// 	this.$refs.popup.open('bottom')
				// } else {
				// 	this.show = true
				// }
			},
			closePop() {
				this.clearAudio()
				this.$refs.popup.close()
			},
			clearAudio() {
				this.audioShow = true
				this.stopShow = false
				this.startShow = false
				this.pauseShow = false
				this.reset()
			},
			kaishi: function() {
				clearInterval(init) //清除定时器
				//监听录音自动结束事件(如果不加，录音时间到最大值自动结束后，没获取到录音路径将无法正常进行播放)
				recorderManager.onStop((res) => {
					console.log('recorder stop', res)
					this.tempFilePath = res.tempFilePath
					this.status = 3
					this.recordingTimer(this.time)
				})

				const options = {
					duration: this.duration, //指定录音的时长，单位 ms
					sampleRate: 16000, //采样率
					numberOfChannels: 1, //录音通道数
					encodeBitRate: 96000, //编码码率
					format: 'mp3', //音频格式，有效值 aac/mp3
					frameSize: 10, //指定帧大小，单位 KB
				}
				this.recordingTimer()
				recorderManager.start(options)
				// 监听音频开始事件
				recorderManager.onStart((res) => {
					console.log('recorder start')
					this.status = 1
				})
				console.log(this.status);
			},
			tingzhi: function() {
				recorderManager.onStop((res) => {
					console.log('recorder stop', res)
					this.tempFilePath = res.tempFilePath
					this.status = 3
				})
				this.recordingTimer(this.time)
				recorderManager.stop()
			},
			/**
			 * 重新录制
			 */
			reset() {
				this.time = 0
				this.tempFilePath = ''
				this.status = 0
				this.playStatus = 0
				clearInterval(init)
				this.sliderchange(this.time)
				innerAudioContext.stop()
			},
			/**
			 * 播放录音
			 */
			bofang: function() {
				//音频地址
				console.log(this.tempFilePath);
				innerAudioContext.src = this.tempFilePath
				//在ios下静音时播放没有声音，默认为true，改为false就好了。
				// innerAudioContext.obeyMuteSwitch = false

				//点击播放
				if (this.playStatus == 0) {
					this.playStatus = 1
					innerAudioContext.play()
				}
			},
			recordingTimer: function(time) {
				var that = this
				if (time == undefined) {
					//将计时器赋值给init
					init = setInterval(function() {
						var time = that.time + 1;
						that.time = time
						if (that.time > 15) {
							that.time = 15
							clearInterval(init)
							uni.showToast({
								title: "录制时间已满",
								icon: 'none',
								duration: 2000
							});
							that.changeBtn(2)
						} else {
							that.sliderchange(time)
						}
					}, 1000);
				} else {
					clearInterval(init)
					console.log("暂停计时")
				}
			},
			changeBtn(num) {
				if (num == 1) {
					this.kaishi()
					this.audioShow = false
					this.stopShow = true
					this.startShow = false
					this.pauseShow = false
					this.title = '录音中,点击按钮,停止录制'
				}
				if (num == 2) {
					this.tingzhi()
					this.audioShow = false
					this.stopShow = false
					this.startShow = true
					this.pauseShow = false
					this.title = '点击播放，试听录音'
				}
				if (num == 3) {
					this.bofang()
					this.audioShow = false
					this.stopShow = false
					this.startShow = false
					this.pauseShow = true
					this.title = '点击暂停'
				}
				if (num == 4) {
					innerAudioContext.stop()
					this.playStatus = 0
					this.audioShow = false
					this.stopShow = false
					this.startShow = true
					this.pauseShow = false
					this.title = '点击播放，试听录音'
				}
			},
			sliderchange(num) {
				var val = num * 66.67;
				val = val / 10;
				this.progresstext = val;
				var deg = val / 100 * 360;
				if (deg <= 180) {
					this.rightprogress = 'rotate(' + (45 + deg) + 'deg)'
					this.leftprogress = 'rotate(' + (-45) + 'deg)'
				} else {
					this.rightprogress = 'rotate(' + (45 + 180) + 'deg)'
					this.leftprogress = 'rotate(' + (-45 + (deg - 180)) + 'deg)'
				}
			},
			// api.post('/web/p1/oss/getsign/web',{obj: 'admin'}).then(function(data){
			//         if(data.code == 0){
			//           var obj = data.data
			//           var host = 'http://ourydc-image.' + obj.host
			//           var policyBase64 = obj.policy
			//           var accessid = obj.accessid
			//           var signature = obj.signature
			//           var callbackbody = obj.callback
			//           var key = that.formatDate()
			//           var name = new Date().getTime() +'.png'
			//           vm.middleName = name
			//           var g_object_name = key + name
			//           var multipart_params = ''
			//           multipart_params = {
			//             name: name,
			//             key: g_object_name,
			//             policy: policyBase64,
			//             OSSAccessKeyId: accessid,
			//             success_action_status: '200',
			//             callback: callbackbody,
			//             signature: signature
			//           }
			//           up.setOption({
			//             url: host,
			//             multipart_params: multipart_params
			//           })
			//           // 上传图片
			//           up.start()
			//         }else{
			//           alert('上传失败，请稍后重试！')
			//           vm.loadFlag = false
			//           $("#mask").css('z-index','2')
			//         }
			//       })
			getsign() {
				var data = {
					url: '/web/v1/apiv1/oss/getsign',
					methods: 'post',
					data: {
						suffix: ''
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {

					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			dynamicNewInfo() {
				this.status1 = 'loading';
				var data = {
					url: '/web/v2/api/dynamic/dynamicNewInfoList',
					methods: 'post',
					data: {
						"apiVersion": "3.1",
						"isRefresh": "1",
						"refreshTimes": 0,
						"rowStart": this.page,
						"rows": 30,
						"topicId": "",
						"type": "5"
						// "rowStart": 0, //分页（必填）
						// "rows": 10, //分页（必填）
						// "apiVersion": "3.1",
						// "isRefresh": "2", //是否刷新（必填）
						// "refreshTimes": "", //刷新时间（必填）
						// "type": "5", //类型 1最新 2精选 3关注 4详情 5我的动态  6话题动态列表 7他的动态
						// "topicId": "", //话题ID
						// "msgTimes": "00" //消息刷新时间
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.nowDt = res.data.data.nowDt
						if (res.data.data.dynamicNewInfoList) {
							this.dynamicNewInfoList = this.dynamicNewInfoList.concat(res.data.data
								.dynamicNewInfoList)
							if (res.data.data.dynamicNewInfoList.length == 0) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.status1 = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.status1 = 'nomore'
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			myProfileInfo() {
				this.photoWalls = []
				var data = {
					url: '/web/v2/api/app/myProfileInfo',
					methods: 'post',
					data: {

					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.listData = res.data.data
						this.date = this.$global.getTimeFormat(this.listData.insdt, 'YMD')
						this.interestData = this.listData.interest.split('/')
						this.emblemList = this.listData.emblemList
						this.emblemList.map((item, key) => {
							item.image = this.$global.getImageUrl(item.image,
								'https://ourydcimage.shenghua6.cn')
						})
						this.durations = this.listData.duration
						var photoWalls = this.listData.photoWalls.split('|')
						photoWalls.map((item, key) => {
							this.photoWalls.push(JSON.parse(item))
						})
						this.photoWalls.map((item, key) => {
							item.imgPath = this.$global.getImageUrl(item.imgPath,
								'https://ourydcimage.shenghua6.cn')
						})
						this.headImg = this.$global.getImageUrl(this.listData.headImg,
							'https://ourydcimage.shenghua6.cn')
						this.voiceIntroductionContent()
						this.dynamicNewInfo()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			voiceIntroductionContent() {
				var data = {
					url: '/web/v2/api/user/voiceIntroductionContent',
					methods: 'post',
					data: {

					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.guideList = res.data.data.guideList
						this.guideName = res.data.data.guideList[0].guideName
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			changeVoiceName() {
				if (this.num == this.guideList.length - 1) {
					this.num = 0
				} else {
					this.num++
				}
				this.guideName = this.guideList[this.num].guideName
			},
			swichMenu: async function(current) { //点击其中一个 menu
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					this.setScrollLeft(current);
				}
			},
			swiperChange: async function(e) {
				let index = e.target.current;
				this.setScrollLeft(index);
				this.currentTab = index;
			},
			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
			},
			getWidth: function(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			loadMore: function(tabIndex) {
				console.log('正在加载更多数据。。。')
				this.getDateList(tabIndex);
			},
			getDateList: function(tabIndex) {
				for (var i = 0; i < 20; i++) {
					var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
					this.swiperDateList[tabIndex].push(entity);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
		background: none;
	}
	
	button {
		width: 100%;
		background: none;
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 28upx;
		display: flex;
		outline: none;
	}
	
	.btn-hover {
		background-color: transparent;
	}
	.fx{
		width: 210upx;
		height: 90upx;
		font-size: 32upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90upx;
		border-radius: 45upx;
		position: absolute;
		top: 0;
	}
	.head {
		position: relative;

		.headImg {
			width: 100%;
			height: 750upx;
		}

		.btn {
			position: absolute;
			bottom: 40upx;
			left: 24upx;
			width: 210upx;
			height: 60upx;
			background: #FF574D;
			font-size: 24upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60upx;
			border-radius: 30upx;
		}
	}

	.message {
		margin: 0 24upx;

		.sex {
			width: 66upx;
			height: 28upx;
			line-height: 28upx;
			color: #FFFFFF;
			font-size: 18upx;
			text-align: center;
		}

		.nianfei {
			width: 82upx;
			height: 28upx;
			line-height: 28upx;
			color: #bd0000;
			font-size: 18upx;
			text-align: center;
			margin-left: 10upx;
		}

		.renzheng {
			width: 65upx;
			height: 26upx;
			margin-left: 10upx;
		}

		.costLevel {
			width: 66upx;
			height: 28upx;
			vertical-align: middle;
			/*更改线上bug增加左边距*/
			margin-left: 10upx;
		}

		.top {
			display: flex;
			align-items: center;
			height: 77upx;
			font-size: 38upx;
			color: #333333;

			.zhenyan {
				width: 135upx;
				margin-left: 20upx;
			}

		}

		.list {
			ul {
				font-size: 24upx;
				color: #999999;
				display: flex;

				li {
					margin-right: 12upx;
				}
			}
		}
	}

	.ziliao {
		width: 100%;
		padding-bottom: 190upx;

		.bottomImg {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;

			.img {
				width: 90upx;
				height: 90upx;
				margin: 0 auto;
				display: block;
			}

			.imgList {
				vertical-align: top;
				/*靠上对齐*/
				display: inline-block;
				width: 120upx;
				margin-right: 20upx;
				height: 100%;
			}

			.txt {
				font-size: 24upx;
				height: 64upx;
				text-align: center;
				color: #333333;
				white-space: normal;
			}
		}

		.title {
			font-size: 28upx;
			color: #999999;
			margin-top: 50upx;
			margin-bottom: 38upx;
		}

		.bigNum {
			padding: 0 10upx;
			text-align: center;
			border-radius: 8upx;
			font-size: 18upx;
			color: #FFFFFF;
			margin-left: 10upx;
			display: block;
		}

		ul {
			li {
				font-size: 30upx;
			}
		}

		.qianming {
			width: 100%;
			height: 120upx;
			line-height: 120upx;
			text-align: center;
			background: #FBF3FC;
			border-radius: 28upx;
			font-size: 24upx;
			color: #333333;
		}

		.biaoqian {
			padding: 10upx 28upx;
			text-align: center;
			background: #ffefee;
			border-radius: 12upx;
			margin-right: 20upx;
			margin-bottom: 20upx;
			font-size: 28upx;
			color: #FF574D;
		}
	}

	.dongtai {
		width: 100%;
		padding-bottom: 200upx;
		margin-top: 20upx;

		.headimg {
			width: 96upx;
			height: 96upx;
		}

		.dtRight {
			flex: 1;
			color: #333333;
			border-bottom: 1px solid #BBBBBB;
			margin-left: 15upx;
			margin-bottom: 35upx;

			.name {
				margin-bottom: 14upx;
				font-size: 32upx;
			}

			.title {
				font-size: 26upx;
				margin-bottom: 12upx;
			}

			.iclist {
				color: #7767cb;
				font-size: 22upx;
				display: flex;

				.listicon {
					border: 1px solid #7767cb;
					border-radius: 20upx;
					padding: 0 10upx;
					margin-right: 10upx;
				}
			}

			.tip {
				font-size: 22upx;
				color: #BBBBBB;
				margin-top: 23upx;
			}

			.bottomR {
				display: flex;
				align-items: center;
				margin-top: 23upx;
				margin-bottom: 28upx;
				font-size: 26upx;
				color: #BABABA;
				justify-content: space-between;
			}
		}
	}

	.bottomBtn {
		width: 100%;
		height: 182upx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

		ul {
			display: flex;

			li {
				width: 210upx;
				height: 90upx;
				background: #FF574D;
				font-size: 32upx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90upx;
				border-radius: 45upx;
			}

			.li2 {
				margin-left: 100upx;
				background: skyblue;
			}
		}
	}

	.body-view {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		width: 100%;
		align-items: flex-start;
		justify-content: center;

		#scrollView {
			width: 100%;
		}
	}

	.pop {
		background: #FFFFFF;
		border-radius: 30upx 30upx 0 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			height: 116upx;
			line-height: 116upx;
			margin-bottom: 20upx;
			font-size: 32upx;
			color: #333333;
			margin: 0 24upx;

			ul {
				display: flex;
			}

			.li2 {
				flex: 1;
				font-size: 34upx;
				text-align: center;
			}

			.li3 {
				color: #FF574D;
			}
		}

		.content {
			width: 702upx;
			height: 330upx;
			font-size: 30upx;
			color: #FFFFFF;
			margin: 0 auto;

			ul {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 96upx;
				line-height: 96upx;
				margin: 0 39upx;

				.li2 {
					width: 83upx;
					height: 54upx;
					border-radius: 27upx;
					background: rgba(255, 255, 255, 0.3);
					display: flex;
					align-items: center;
					justify-content: center;

					.shuaxin {
						width: 36upx;
						height: 32upx;
					}
				}
			}

			.txt {
				width: 564upx;
				height: 137upx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 0 68.5upx 0 68.5upx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 30upx;
			}
		}

		.btnAll {
			display: flex;
			justify-content: center;
			margin-top: 90upx;

			.btn {
				width: 124upx;
				height: 124upx;
				line-height: 124upx;
				text-align: center;
				border-radius: 50%;
				background: #D8D8D8;
				font-size: 30upx;
				color: #FFFFFF;
				margin-top: 34upx;
			}
		}

		.circleprogress {
			width: 200upx;
			height: 200upx;
			display: flex;
			justify-content: center;
			margin-left: 64upx;
			margin-right: 60upx;
		}

		.circleprogress .progresstext {
			position: absolute;
			font-size: 4upx;
			width: 200upx;
			height: 200upx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;
			color: #ED78E1;
		}

		.circleprogress .wrapper {
			width: 100upx;
			height: 200upx;
			overflow: hidden;
		}

		.circleprogress .leftprogress,
		.rightprogress {
			width: 185upx;
			height: 185upx;
			border: 4px solid #f9dcf8;
			border-bottom: 4px solid #ED78E1;
			border-radius: 50%;

		}

		.circleprogress .leftprogress {
			border-right: 4px solid #ED78E1;
		}

		.circleprogress .rightprogress {
			border-left: 4px solid #ED78E1;
			margin-left: -100upx;
		}

		.circleprogress .img {
			width: 170upx;
			height: 170upx;
		}
	}

	.top-menu-view {
		display: flex;
		white-space: nowrap;
		width: 100%;
		background-color: #FFFFFF;
		height: 86upx;
		/* 在这里设置导航条高度 */
	}

	.top-menu-view .menu-one-view {
		display: inline-block;
		white-space: nowrap;
		height: 100%;
	}

	.top-menu-view .menu-one-view .menu-one {
		/* 在这里写 单个按钮样式 */
		margin-left: 25upx;
		margin-right: 25upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-txt {
		height: 40upx;
		font-size: 31upx;
		color: #999999;
		font-weight: 400;
		line-height: 40upx;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
		width: 60%;
		height: 4upx;
	}

	.top-menu-view .menu-one-view .menu-one-act {
		/* 在这里写 单个按钮样式 */
		margin-right: 25upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
		height: 40upx;
		font-size: 52upx;
		color: #333333;
		font-weight: 400;
		line-height: 40upx;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
		width: 24upx;
		height: 8upx;
		background: #FF574D;
		box-shadow: 3upx 0 4upx 0 rgba(255, 87, 77, 0.46);
		border-radius: 4upx;
		border-radius: 4upx;
	}

	.swiper-box-list {
		flex: 1;
		width: 100%;
		height: 864upx;
		background-color: #FFFFFF;
	}

	.swiper-one-list {
		height: 100%;
		width: 100%;
	}

	.swiper-one-list .swiper-list-entity {
		width: 100%;
		height: 112upx;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
</style>
